<template>
    <div>
 <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
  <el-row :gutter="15">
    <el-col :span="15">
      <el-form-item label="员工名称" prop="Name">
        <el-input v-model="formData.Name" placeholder="请输入员工名称" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="部门名称" prop="Department">
        <el-input v-model="formData.Department" placeholder="请输入部门名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="电话" prop="Telephone">
        <el-input v-model="formData.Telephone" placeholder="请输入电话" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="邮箱" prop="EmailAddress">
        <el-input v-model="formData.EmailAddress" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="职位名称" prop="Position">
        <el-input v-model="formData.Position" placeholder="请输入职位名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="员工描述" prop="Description">
        <el-input v-model="formData.Description" placeholder="请输入员工描述" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="员工状态" prop="Status">
        <el-radio-group v-model="formData.Status" size="medium">
          <el-radio v-for="(item, index) in StatusOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="创建时间" prop="CreatedDate">
        <el-time-picker v-model="formData.CreatedDate" format="HH:mm:ss" value-format="HH:mm:ss"
          :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
          placeholder="请选择创建时间" clearable></el-time-picker>
      </el-form-item>
    </el-col>
    <el-col :span="15">
      <el-form-item label="更新时间" prop="ModifiedDate">
        <el-time-picker v-model="formData.ModifiedDate" format="HH:mm:ss" value-format="HH:mm:ss"
          :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
          placeholder="请选择更新时间" clearable></el-time-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item size="large">
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
    
  </el-form-item>
</el-form>

    </div>
   
</template>
<script>

import { AddEmp } from "../../api/employee.js";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        Name: "",
        Department: "",
        Telephone: "",
        EmailAddress: "",
        Position: "",
        Description: "",
        Status: "",
        CreatedDate: '17:25:24',
        ModifiedDate: '17:25:30',
      },
      rules: {
        Name: [{
          required: true,
          message: '请输入员工名称',
          trigger: 'blur'
        }],
        Department: [{
          required: true,
          message: '请输入部门名称',
          trigger: 'blur'
        }],
        Telephone: [{
          required: true,
          message: '请输入电话',
          trigger: 'blur'
        }],
        EmailAddress: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        Position: [{
          required: true,
          message: '请输入职位名称',
          trigger: 'blur'
        }],
        Description: [{
          required: true,
          message: '请输入员工描述',
          trigger: 'blur'
        }],
        Status: [{
          required: true,
          message: '员工状态不能为空',
          trigger: 'change'
        }],
        CreatedDate: [{
          required: true,
          message: '请选择创建时间',
          trigger: 'change'
        }],
        ModifiedDate: [{
          required: true,
          message: '请选择更新时间',
          trigger: 'change'
        }],
      },
      StatusOptions: [{
        "label": "离职",
        "value": 0
      }, {
        "label": "在职",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
  
    submitForm() {
      AddEmp(this.formData)
      .then((res) => {
        if(res.code>0)
        {
          alert("添加成功");
          this.$router.push("/table");
        }
        else{
          alert("添加失败");
        }
      });
      this.editVisible = false;
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}
</script>